<!--
* @Author: zhangjing
* @Date: 2025-03-21 13:27:43
* @Description: 测量=>
-->
<template>
	<view class="pageview">
		<accountInfo></accountInfo>
		<view class="mod">
			<view class="mod-hd">健康监测</view>
			<view class="measure mod-bd">
				<view class="measure-item">
					<view class="measure-item-hd u-flex-y-center u-flex-between">
						<view class="u-flex-y-center">
							<view class="icon icon2">
								<image src="/static/home/icon02.png" mode="widthFix"></image>
							</view>
							<text>血压</text>
							<template v-if="BP2AInfo && BP2AInfo.systolic_pressure && BP2AInfo.diastolic_pressure">
								<view class="state" :style="{ color: getBP2State(BP2AInfo).color }">
									{{ getBP2State(BP2AInfo).text }}
								</view>
							</template>
						</view>
						<view class="u-flex-y-center more" @tap="navTo('BP2A')">
							<text>{{ BP2AInfo.systolic_pressure ? '重新测量' : '去测量' }}</text>
							<u-icon name="arrow-right" size="30"></u-icon>
						</view>
					</view>
					<view class="measure-item-bd result u-flex-y-center u-flex-between u-m-t-20">
						<view class="flex-sub">
							<view>收缩压</view>
							<view class="u-margin-top-20">
								<text class="num">{{ BP2AInfo.systolic_pressure || '--' }}</text>
								<text class="unit">mmHg</text>
							</view>
						</view>
						<view class="flex-sub">
							<view>舒张压</view>
							<view class="u-margin-top-20">
								<text class="num">{{ BP2AInfo.diastolic_pressure || '--' }}</text>
								<text class="unit">mmHg</text>
							</view>
						</view>
						<view class="flex-sub">
							<view>心率</view>
							<view class="u-margin-top-20">
								<text class="num">{{ BP2AInfo.hr || '--' }}</text>
								<text class="unit">次/分钟</text>
							</view>
						</view>
					</view>
				</view>

				<view class="measure-item">
					<view class="measure-item-hd u-flex-y-center u-flex-between">
						<view class="u-flex-y-center">
							<view class="icon icon4">
								<image src="/static/home/icon04.png" mode="widthFix"></image>
							</view>
							<text>血糖</text>
							<template v-if="GM501Info && GM501Info.result">
								<view class="state" :style="{ color: getBoState(GM501Info.result).color }">
									{{ getBoState(GM501Info.result).text }}
								</view>
							</template>
						</view>
						<view class="u-flex-y-center more" @tap="navTo('GM501')">
							<text>{{ GM501Info.result ? '重新测量' : '去测量' }}</text>
							<u-icon name="arrow-right" size="30"></u-icon>
						</view>
					</view>
					<view class="measure-item-bd result u-flex-y-center u-flex-between u-m-t-20">
						<view class="flex-sub">
							<view>血糖值</view>
							<view class="u-margin-top-20">
								<text class="num">{{ GM501Info.result || '--' }}</text>
								<text class="unit">mmol/L</text>
							</view>
						</view>
						<view class="flex-sub">
							<view>检测时段</view>
							<view class="u-margin-top-20">
								<text class="num" style="font-size: 40rpx">{{ GM501Info.testNutritionalTime || '--' }}</text>
								<text class="unit"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="measure-item">
					<view class="measure-item-hd u-flex-y-center u-flex-between">
						<view class="u-flex-y-center">
							<view class="icon icon5">
								<image src="/static/home/icon05.png" mode="widthFix"></image>
							</view>
							<text>心电图</text>
						</view>
						<view class="u-flex-y-center more" @tap="navTo('ER')">
							<text>{{ ecgChartData.length > 0 ? '重新测量' : '去测量' }}</text>
							<u-icon name="arrow-right" size="30"></u-icon>
						</view>
					</view>
					<view class="measure-item-bd charts-box result u-m-t-20">
						<ecgChart :ecgChartData="ecgChartData"></ecgChart>
					</view>
				</view>
				<view class="measure-item">
					<view class="measure-item-hd u-flex-y-center u-flex-between">
						<view class="u-flex-y-center">
							<view class="icon icon1">
								<image src="/static/home/icon01.png" mode="widthFix"></image>
							</view>
							<text>体重体脂</text>
							<template v-if="WeightInfo && WeightInfo.bmi">
								<view class="state" :style="{ color: getF2State(WeightInfo).color }">
									{{ getF2State(WeightInfo).text }}
								</view>
							</template>
						</view>
						<view class="u-flex-y-center more" @tap="navTo('F2Pro')">
							<text>{{ WeightInfo.bmi ? '重新测量' : '去测量' }}</text>
							<u-icon name="arrow-right" size="30"></u-icon>
						</view>
					</view>
					<view class="measure-item-bd result u-flex-y-center u-flex-between u-m-t-20">
						<view class="flex-sub">
							<view>体重</view>
							<view class="u-margin-top-20">
								<text class="num">{{ WeightInfo.weightData || '--' }}</text>
								<text class="unit">公斤</text>
							</view>
						</view>
						<view class="flex-sub">
							<view>BMI</view>
							<view class="u-margin-top-20">
								<text class="num">{{ WeightInfo.bmi || '--' }}</text>
								<text class="unit">kg/m²</text>
							</view>
						</view>
						<view class="flex-sub">
							<view>体脂率</view>
							<view class="u-margin-top-20">
								<text class="num">{{ WeightInfo.bfr || '--' }}</text>
								<text class="unit">%</text>
							</view>
						</view>
					</view>
				</view>
				<view class="measure-item">
					<view class="measure-item-hd u-flex-y-center u-flex-between">
						<view class="u-flex-y-center">
							<view class="icon icon3">
								<image src="/static/home/icon03.png" mode="widthFix"></image>
							</view>
							<text>血氧饱和度</text>
							<template v-if="O2Info && O2Info.spo2">
								<view class="state" :style="{ color: getO2State(O2Info.spo2).color }">
									{{ getO2State(O2Info.spo2).text }}
								</view>
							</template>
						</view>
						<view class="u-flex-y-center more" @tap="navTo('O2')">
							<text>{{ O2Info.spo2 ? '重新测量' : '去测量' }}</text>
							<u-icon name="arrow-right" size="30"></u-icon>
						</view>
					</view>
					<view class="measure-item-bd result u-flex-y-center u-flex-between u-m-t-20">
						<view class="flex-sub">
							<view>最低含氧量</view>
							<view class="u-margin-top-20">
								<text class="num">{{ O2Info.spo2 || '--' }}</text>
								<text class="unit">%</text>
							</view>
						</view>
						<view class="flex-sub">
							<view>脉率</view>
							<view class="u-margin-top-20">
								<text class="num">{{ O2Info.pr || '--' }}</text>
								<text class="unit">次/分钟</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="20"></u-gap>
		<deviceModal ref="deviceModal"></deviceModal>
		<canvas class="hideCanvas" :style="{ width: canvasWidth, height: canvasHeight }" canvas-id="myCanvas"></canvas>
	</view>
</template>

<script>
	import accountInfo from './components/accountInfo.vue';
	import deviceModal from './components/deviceModal.vue';
	import ecgChart from './components/ecgChart.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		bpSteps,
		weightSteps,
		O2Steps,
		dmSteps
	} from '@/utils/enum.js';
	import mixin from './mixin.js';
	export default {
		data() {
			return {
				ecgChartData: {
					categories: [],
					series: [{
						name: '心电',
						data: []
					}]
				},
				WeightInfo: {
					weightData: null,
					bmi: null,
					bfr: null
				},
				BP2AInfo: {
					systolic_pressure: null,
					diastolic_pressure: null,
					hr: null
				},
				O2Info: {
					spo2: null,
					pr: null
				},
				GM501Info: {
					result: null,
					formatTime: null,
					indicatorOriginalResult: null,
					testNutritionalTime: null
				}
			};
		},
		mixins: [mixin],
		components: {
			accountInfo,
			deviceModal,
			ecgChart
		},
		computed: {
			...mapState(['devicelist', 'curAccount'])
		},
		// watch: {
		// 	'curAccount.detailId': {
		// 		handler(newValue, oldValue) {
		// 			if (this.curAccount.detailId) {
		// 				this.init();
		// 			}
		// 		},
		// 		immediate: false
		// 	}
		// },
		onShow() {
			if (this.curAccount.patientId) {
				this.init();
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			if (this.curAccount.patientId) {
				this.init();
			}
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 300);
		},
		methods: {
			...mapMutations(['$uStore']),
			init() {
				this.getWeightLatest();
				this.getBP2ALatest();
				this.getO2Latest();
				this.getBoLatest();
				this.getCurrentHospPatientInfo();
				//this.findEcgFirstPage();
				//this.getSignInToday();				
			},
			//获取首页保存的病人信息
			getCurrentHospPatientInfo(){
				this.$postAction(this.$api.getCurrentHospPatientInfo).then(da => {
					this.$uStore({
						name: 'curAccount',
						value: da
					});
					console.log("获取首页保存的病人信息",JSON.stringify(da))
				});
			},
			
			getWeightLatest() {
				this.$postAction(this.$deviceapi.getWeightLatest, {
					//detailId: this.curAccount.detailId,
					patientId:this.curAccount.patientId
				}).then(da => {
					if (da) {
						this.WeightInfo = {
							weightData: da.data.weightData,
							bmi: da.data.details.bmi,
							bfr: da.data.details.bfr
						};
					} else {
						this.WeightInfo = {
							weightData: null,
							bmi: null,
							bfr: null
						};
					}
				});
			},
			getBP2ALatest() {
				this.$postAction(this.$deviceapi.getdocBP2ALatest, {
					//detailId: this.curAccount.detailId,
					patientId:this.curAccount.patientId
				}).then(da => {
					this.BP2AInfo = da;
					console.log("血压",JSON.stringify(da))
				});
			},
			getO2Latest() {
				this.$postAction(this.$deviceapi.getdocO2Latest, {
					//detailId: this.curAccount.detailId
					patientId:this.curAccount.patientId
			}).then(da => {
					this.O2Info = da;
					console.log("血氧",JSON.stringify(da))
				});
			},
			getBoLatest() {
				this.$postAction(this.$deviceapi.getdocBoLatest, {
					//detailId: this.curAccount.detailId
					patientId:this.curAccount.patientId
				}).then(da => {
					this.GM501Info = da;
					console.log("血糖",JSON.stringify(da))
				});
			},

			findEcgFirstPage() {
				//this.$postAction(this.$deviceapi.findEcgFirstPage + '?detailId=' + this.curAccount.detailId).then(da => {
				this.$postAction(this.$deviceapi.findEcgFirstPage + '?patientId=' + this.curAccount.patientId).then(da => {
					let categories = [],
						data = [],
						createTime = '';
					if (da && da.length > 0) {
						for (let i = 0; i < da.length; i++) {
							let list = da[i].data;
							if (list && list.length > 0) {
								list.forEach((item, index) => {
									categories.push(index);
									data.push(item);
								});
							}
						}
						createTime = da[da.length - 1].createTime;
					}

					let res = {
						categories: categories.splice(-1000),
						series: [{
							name: '心电',
							data: data.splice(-1000)
						}]
					};
					this.ecgChartData = JSON.parse(JSON.stringify(res));
				});
			},
			getBP2State(info) {
				if (info.systolic_pressure >= 180 || info.diastolic_pressure >= 110) {
					return bpSteps[5];
				} else if (info.systolic_pressure >= 160 || info.diastolic_pressure >= 100) {
					return bpSteps[4];
				} else if (info.systolic_pressure >= 140 || info.diastolic_pressure >= 90) {
					return bpSteps[3];
				} else if (info.systolic_pressure >= 130 || info.diastolic_pressure >= 85) {
					return bpSteps[2];
				} else if (info.systolic_pressure >= 90 || info.diastolic_pressure >= 60) {
					return bpSteps[1];
				} else if (info.systolic_pressure < 90 || info.diastolic_pressure < 60) {
					return bpSteps[0];
				}
			},
			getF2State(state) {
				if (state >= 28) {
					return weightSteps[3];
				} else if (state >= 24) {
					return weightSteps[2];
				} else if (state >= 18.5) {
					return weightSteps[1];
				} else {
					return weightSteps[0];
				}
			},
			getO2State(state) {
				if (state >= 95) {
					return O2Steps[2];
				} else if (state >= 90) {
					return O2Steps[1];
				} else {
					return O2Steps[0];
				}
			},
			getBoState(state) {
				console.log('state', state);
				if (state >= 10) {
					return dmSteps[2];
				} else if (state >= 4.4) {
					return dmSteps[1];
				} else {
					return dmSteps[0];
				}
			},
			getSignInToday() {
				// this.$postAction(this.$api.getSignInToday, {
				// 	detailId: this.curAccount.detailId
				// }).then(da => {
				// 	if (da && da.detailId && da.url) {
				// 		let urls = da.url.split(';');
				// 		this.fileList1 = urls.map(item => {
				// 			return {
				// 				url: this.filterUrl + item
				// 			};
				// 		});
				// 	} else {
				// 		this.fileList1 = [];
				// 	}
				// });
			},
			getDeviceList() {
				return this.$postAction(this.$deviceapi.getDeviceList, {
					userId: this.userInfo.userId
				}).then(da => {
					/* 保存设备信息 */
					this.$uStore({
						name: 'devicelist',
						value: da
					});
				});
			},
			async navTo(type) {
				//先判断有没有设备列表。
				if (this.devicelist.length == 0) {
					/* 获取设备列表 */
					await this.getDeviceList();
				}
				if (this.devicelist.length > 0) {
					let devices = [];
					if (type == 'BP2A') {
						devices = this.devicelist.filter(item => item.deviceTypeCode.indexOf(type) > -1 || item.deviceTypeCode
							.indexOf('V3') > -1)
					} else {
						devices = this.devicelist.filter(item => item.deviceTypeCode.indexOf(type) > -1)
					}
					if (devices.length > 1) {
						this.$refs.deviceModal.open(type);
					} else if (devices.length == 1) {
						let device = devices[0];
						let path = '';
						switch (device.deviceTypeCode) {
							case 'O2Max':
							case 'O2Ring': {
								path = '/pages/device/o2device';
								break;
							}
							case 'BP2A': {
								path = '/pages/device/bp2device';
								break;
							}
							case 'V3': {
								path = '/pages/device/v3device';
								break;
							}
							case 'F2Pro': {
								path = '/pages/device/f2device';
								break;
							}
							case 'ER': {
								path = '/pages/device/erdevice';
								break;
							}
							case 'GM501': {
								path = '/pages/device/dmdevice';
								break;
							}
						}

						if (path) {
							this.$Router.push({
								path: path + '?deviceType=' + device.deviceTypeCode + '&deviceMac=' + device.mac
							});
						}
					} else {
						this.$Router.push({
							path: '/pages/device/device'
						});
					}
				} else {
					this.$Router.push({
						path: '/pages/device/device'
					});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.pageview {
		position: relative;
	}

	.mod {
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx;
	}

	.mod-hd {
		font-size: 36rpx;
		padding: 20rpx;
	}

	.mod-bd {
		padding: 0 20rpx;
	}

	.measure.mod-bd {
		padding-bottom: 1rpx;
	}

	.measure-item {
		padding: 20rpx;
		border-radius: 10rpx;
		background: #f4fafa;
		margin-bottom: 20rpx;

		.measure-item-hd {
			font-size: 32upx;
			font-weight: 600;

			.more {
				font-weight: normal;
				font-size: 24rpx;
				color: #a5adae;
			}

			.state {
				font-weight: 400;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}

		.icon {
			border-radius: 100%;
			height: 50upx;
			width: 50upx;
			margin-right: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				display: block;
				width: 35upx;
				height: 35upx;
			}

			&.icon1 {
				background: #00cca9;
			}

			&.icon2 {
				background: #ff5949;
			}

			&.icon3 {
				background: #fe3770;
			}

			&.icon4 {
				background: #fd7c1e;

				image {
					display: block;
					width: 30upx;
					height: 30upx;
				}
			}

			&.icon5 {
				background: #d0425a;
			}
		}

		.result {
			border-radius: 16upx;
			font-size: 28upx;
			color: #a5adae;

			.flex-sub {
				padding: 0 16upx;
			}

			.num {
				color: #243138;
				font-size: 46upx;
				font-weight: bold;
			}

			.unit {
				color: #374547;
				font-size: 24upx;
				margin-left: 10upx;
			}
		}
	}

	.measure-item-weight {
		background: #e7fbf8;
	}

	.charts-box {
		width: 100%;
		height: 210rpx;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}
</style>